<!--
/**
* Author: KSJ
* Date: 2022-07-22 15:11
* Desc: 购票
*/
-->
<template>
  <yy-page hasTab>
    <u-sticky bg-color="#fff" offset-top="0" style="top: 0">
      <view class="flex flex-c-m">
        <u-tabs @click="handleChange" :current="current" :active-style="{ color: '#3BC5D2' }" :list="tabList" line-color="#3BC5D2"></u-tabs>
      </view>
      <scroll-view v-if="current == 1 && dateList.length" scroll-x class="date-content flex">
        <view @click="changeDate(item)" class="date-item mr20" :class="{ active: item == dateCurret }" v-for="item in dateList" :key="item">{{ item }}</view>
      </scroll-view>
    </u-sticky>
    <zm-mescroll-body height="800" ref="mescrollRef" :up="up" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="ticket-list">
        <ticket-item :want-view="item.wantView" @look="toLook" @buy="toBuy" :item="item" :type="current" v-for="(item, index) in listData" :key="item.filmId + index" />
      </view>
    </zm-mescroll-body>
  </yy-page>
</template>

<script>
  import TicketItem from './components/TicketItem'
  import listMixins from '@/mixins/newListMixin'
  import ZmMescrollBody from '@/commons/ZmMescrollBody/index.vue'
  import pageMixins from '@/mixins/pageMixins'
  import sharePage from '@/mixins/sharePage'
  export default {
    mixins: [pageMixins, listMixins, sharePage],
    components: {
      ZmMescrollBody,
      TicketItem
    },
    data() {
      return {
        pkId: 'filmId',
        dateCurret: '', // 当前选中的时间
        tabList: [
          { name: '热映影片', id: 1 },
          { name: '即将上映', id: 2 }
        ],
        up: {
          bgColor: '#fff',
          textLoading: '加载中 ...', // 加载中的提示文本
          textNoMore: '-- 没有更多数据 --', // 没有更多数据的提示文本
          empty: {
            type: 'schedule',
            use: true,
            marginTop: '150rpx',
            tip: '~ 空空如也 ~' // 空提示
          }
        },
        // upOpt: {
        //   empty: {
        //     type: 'product',
        //     top: 200,
        //     use: true // 是否显示空布局
        //   }
        // },
        dateList: [],
        current: 0,
        finished: false
      }
    },
    onLoad() {
      // this.refresh()
    },
    onShow() {
      // #ifdef MP-TOUTIAO
      this.$tools.navigateTo('/pagesOrder/filmCouponByTT/index', {}, 'reLaunch')
      // #endif
    },
    methods: {
      refresh() {
        this.getDate()
        this.listData = []
        this.downCallback()
      },
      listLoad(param) {
        return this.current === 0 ? this.getHotFilmList(param) : this.getPreFilmList(param)
      },
      getData(list) {
        console.log('getData', list)
      },
      toLook(item) {
        this.$tools.navigateTo(`/subPages/filmDetail/filmDetail`, {
          filmCode: item.filmCode,
          filmId: item.filmId,
          preSaleFlag: item.preSaleFlag
        })
      },
      getDate() {
        uni.$api.film.getPreDateList().then((res) => {
          this.dateList = res
          this.dateCurret = res.length ? res[0] : ''
        })
      },
      changeDate(date) {
        this.dateCurret = date
        this.downCallback()
        // this.getPreFilmList().then()
        // this.listData = this.getPreFilmList()
      },
      toBuy(e) {
        console.log(e)
        const isSingle = this.$auth.getSingleModel()
        console.log('isSingle', isSingle)
        if (isSingle) {
          // 多影城到影院选择
          const query = this.$utils.encode({
            filmCode: e.filmCode,
            filmName: e.filmName
          })
          this.$tools.navigateTo(`/subPages/selectFilm/selectFilm?query=${query}`)
        } else {
          // 单影城排期页面
          this.$tools.navigateTo(`/subPages/selectCinema/selectCinema`, {
            cinemaId: this.$auth.getLocBaseSet().cinemaId,
            filmCode: e.filmCode,
            planDate: this.$utils.dateFmt(new Date())
          })
        }
      },
      handleChange(e) {
        this.listData = []
        this.current = e.index
        this.downCallback()
      },
      getHotFilmList() {
        const query = {}
        return uni.$api.film.getHotFilmList(query)
      },
      getPreFilmList() {
        const query = { preDate: this.dateCurret }
        return uni.$api.film.getPreFilmList(query)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ticket-list {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  .date-content {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    white-space: nowrap;
    /* #ifdef MP-TOUTIAO  */
    height: 110rpx;
    box-sizing: border-box;
    /* #endif */
    .date-item {
      display: inline-block;
      font-size: 26rpx;
      padding: 5rpx 30rpx;
      box-sizing: border-box;
      border: solid 1rpx #eee;
      color: #aaa;
      border-radius: 50rpx;
      &.active {
        border: 1rpx solid $u-type-primary;
        color: $u-type-primary;
      }
    }
  }
</style>
